import 'package:flutter/material.dart';
import 'package:yysk_app/model/tab_model.dart';
import 'package:yysk_app/utils/helper.dart';

class Tab2Widget extends StatefulWidget {
  final List<TabModel> tabList;
  final ValueChanged<String>? onChanged;
  final bool? sign;
  final int index; // 默认选择第一个tab
  const Tab2Widget(
      {super.key,
      required this.tabList,
      this.onChanged,
      this.sign = false,
      this.index = 0});

  @override
  State<Tab2Widget> createState() => _Tab2WidgetState();
}

class _Tab2WidgetState extends State<Tab2Widget> {
  String? _current;

  @override
  void initState() {
    super.initState();
    _current =
        widget.tabList.isNotEmpty ? widget.tabList[widget.index].code : null;
  }

  @override
  Widget build(BuildContext context) {
    return SizedBox(
      width: MediaQuery.of(context).size.width - 160,
      child: Row(
        mainAxisAlignment: MainAxisAlignment.center,
        children: [
          _items(context),
        ],
      ),
    );
  }

  _items(BuildContext context) {
    List<Widget> items = [];
    for (var i = 0; i < widget.tabList.length; i++) {
      items.add(_item(context, widget.tabList[i], i));
    }
    return Row(
      mainAxisSize: MainAxisSize.min,
      children: items,
    );
  }

  _gradientText(text, Alignment begin, Alignment end, colors) {
    return ShaderMask(
      shaderCallback: (rect) {
        return LinearGradient(
          begin: begin,
          end: end,
          colors: colors,
        ).createShader(rect);
      },
      child: Text(
        "$text",
        style: TextStyle(color: Colors.white, fontSize: 18.px),
      ),
    );
  }

  Widget _item(BuildContext context, TabModel model, int index) {
    var isCurrent = _current == model.code;
    return GestureDetector(
      onTap: () {
        setState(() {
          _current = model.code;
        });
        if (widget.onChanged != null) {
          widget.onChanged!(_current!);
        }
      },
      child: Row(
        children: [
          index > 0 ? hiSpace(width: 24.px) : const SizedBox(),
          Column(
            children: [
              isCurrent
                  ? _gradientText(model.label, Alignment.centerLeft,
                      Alignment.centerRight, [
                      const Color(0xFF75FBFD),
                      const Color(0xFF008DFF),
                    ])
                  : Text(
                      model.label,
                      style: TextStyle(
                        color: Colors.white70,
                        fontSize: 18.px,
                      ),
                    ),
              isCurrent
                  ? Container(
                      width: _getTextWidth(model.label, 18.px),
                      height: 3.px,
                      decoration: BoxDecoration(
                        borderRadius: BorderRadius.circular(3.px),
                        gradient: const LinearGradient(
                            begin: Alignment.centerLeft,
                            end: Alignment.centerRight,
                            colors: [Color(0xFF75FBFD), Color(0xFF008DFF)]),
                      ),
                    )
                  : Container(
                      height: 3,
                    )
            ],
          )
        ],
      ),
    );
  }

  double _getTextWidth(String text, double fontSize) {
    final TextPainter textPainter = TextPainter(
      text: TextSpan(
        text: text,
        style: TextStyle(
          fontSize: fontSize,
          fontWeight: FontWeight.w500,
        ),
      ),
      maxLines: 1,
      textDirection: TextDirection.ltr,
    )..layout();
    return textPainter.width;
  }
}
